import React from 'react';
import PropTypes from 'prop-types';
// import ImagePicker from './components/imagePicker';
import Catalog from './components/catalog';
import Spacer from 'components/canvas/spacer';
import css from './index.less';

export default class Image extends React.Component {

  static propTypes = {
    onChange: PropTypes.func,
    onRemove: PropTypes.func,
    src: PropTypes.string,
  };

  static defaultProps = {
    onChange: (val, { src, width, height }) => {},
    onRemove: () => {},
    src: 'about:blank',
  };

  renderImage() {
    const { src, onRemove, onChange } = this.props;
    const spacerProps = {
      row: 32,
      col: 32,
      size: 8,
      width: 190,
      height: 190,
    };
    return (
      <div>
        <div className={css.transparentWrap}>
          <div className={css.imgWrap}>
            <Catalog
              style={{display: 'block'}}
              onChange={(...params) => {
                onChange(...params);
              }}>
              <img src={src} title="点我重新选中图片" />
            </Catalog>
          </div>
          <Spacer {...spacerProps} />
        </div>
        <Catalog
          onChange={(...params) => {
            onChange(...params);
          }}>
          <span className={css.text}>重新选择图片</span>
        </Catalog>
        <span className={css.text}
              onClick={() => {
                onChange('', { src: '', width: 0, height: 0 });
                onRemove();
              }}>删除图片</span>
      </div>
    );
  }

  renderAdd() {
    const { onChange } = this.props;
    return (
      <Catalog
        onChange={(...params) => {
          onChange(...params);
        }}>
        <div className={css.addWrap} />
      </Catalog>
    );
  }

  render() {
    const { src } = this.props;
    const isEmpty = (src && src !== 'about:blank');
    return (
      <div className={css.wrap}>
        {isEmpty ? this.renderImage() : this.renderAdd()}
      </div>
    );
  }
}
